<template>
  <div class="common-layout">
    <el-container>
      <!-- header -->
      <el-header>
        <el-row>
          <el-col :span="3"
            ><div class="grid-content ep-bg-purple" />
            <h3>路边停车平台后台</h3>
          </el-col>
          <el-col :span="17"
            ><div class="grid-content ep-bg-purple-light"
          /></el-col>
          <el-col :span="3"
            ><div class="grid-content ep-bg-purple" />
            <div class="header-right">
              <div @mouseover="userInfo">
                <el-avatar :size="size" :src="circleUrl" />
                <span style="margin-left: 10px">admin</span>
                <div
                  class="showUserInfo"
                  ref="showUserInfo"
                  v-show="isShow"
                  @mouseout="hiddenUserInfo"
                >
                  <div class="title">
                    <span>账户信息</span>
                    <a href="" class="changePassword">修改密码</a>
                  </div>
                  <div class="content">
                    <p>账号: <span>XXX管理员</span></p>
                    <p>本次登录: <span>2017-07-03 14:36:21</span></p>
                    <p>登录地区: <span>广东省深圳市(IP: 183.14.135.1)</span></p>
                    <p>上次登录: <span>2017-07-03 14:36:21</span></p>
                  </div>
                </div>
              </div>
              <div>
                <el-icon style="font-size: 25px"
                  ><el-badge :value="3" class="item"><Bell /></el-badge
                ></el-icon>
                <div class="olderTip"></div>
              </div>
              <div>
                <router-link to="/login"
                  ><el-icon><SwitchButton /></el-icon
                ></router-link>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="220px"
          ><el-menu
            active-text-color="#ffd04b"
            background-color="rgb(249,249,249)"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="rgb(153,153,153)"
            :router="true"
          >
            <!-- <el-menu-item index="1">
              <el-icon><icon-menu /></el-icon>
              <span>首页</span>
            </el-menu-item> -->
            <el-menu-item class="firstPage" index="0-1" route="/home/FirstPage"
              >首页</el-menu-item
            >
            <el-sub-menu index="/home/FirstPage" router="/home/FirstPage">
              <template #title>
                <el-icon><location /></el-icon>
                <span>权限管理</span>
              </template>
              <!-- <el-menu-item-group> -->
              <el-menu-item index="1-1" route="/home/role"
                >角色管理</el-menu-item
              >
              <el-menu-item index="1-2" route="/home/administrantors"
                >管理员账号</el-menu-item
              >
              <el-menu-item index="1-3" route="/home/department"
                >部门管理</el-menu-item
              >
              <!-- </el-menu-item-group> -->
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon><location /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="2-1" route="/home/platformInfo">平台信息</el-menu-item>
              <el-menu-item index="home">第三方参数</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon><location /></el-icon>
                <span>日志管理</span>
              </template>
              <el-menu-item index="home">登录日志</el-menu-item>
              <el-menu-item index="home">操作日志</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><location /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="4-1" route="/home/userManagement"
                >用户管理</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><location /></el-icon>
                <span>车辆管理</span>
              </template>
              <el-menu-item index="home">车辆管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon><location /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="home">订单管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon><location /></el-icon>
                <span>员工管理</span>
              </template>
              <el-menu-item index="home">巡检员管理</el-menu-item>
              <el-menu-item index="home">运维员管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="8">
              <template #title>
                <el-icon><location /></el-icon>
                <span>路段管理</span>
              </template>
              <el-menu-item index="home">实时路段管理</el-menu-item>
              <el-menu-item index="home">路段管理</el-menu-item>
              <el-menu-item index="home">泊位管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="9">
              <template #title>
                <el-icon><location /></el-icon>
                <span>设备管理</span>
              </template>
              <el-menu-item index="home">地磁管理</el-menu-item>
              <el-menu-item index="home">手持PDA管理</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="11">
              <template #title>
                <el-icon><location /></el-icon>
                <span>反馈管理</span>
              </template>
              <el-menu-item index="11-1" route="/home/feedback"
                >用户反馈工单</el-menu-item
              >
              <el-menu-item index="11-2" route="/home/inspection"
                >巡检员反馈</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="12">
              <template #title>
                <el-icon><location /></el-icon>
                <span>财务管理</span>
              </template>
              <el-menu-item index="home">资金流水</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="10">
              <template #title>
                <el-icon><location /></el-icon>
                <span>统计管理</span>
              </template>
              <el-menu-item index="home">营收统计</el-menu-item>
              <el-menu-item index="home">支付统计</el-menu-item>
              <el-menu-item index="home">路段统计</el-menu-item>
              <el-menu-item index="home">考勤统计</el-menu-item>
            </el-sub-menu>
          </el-menu></el-aside
        >
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { is } from "@babel/types";
import { computed, onMounted, ref } from "vue";
onMounted(() => {
  console.log(showUserInfo.value);
});

let isShow = ref(false);
const showUserInfo = ref<null | HTMLElement>(null);
const size = "size";
const circleUrl = "circleUrl";
const userInfo = () => {
  isShow.value = true;
  console.log(isShow);
};
const hiddenUserInfo = (): void => {
  isShow.value = false;
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.el-menu {
  width: 200px;
}
.header-right {
  display: flex;
  align-items: center;
}

.el-header {
  height: 50px;
  line-height: 50px;
  background-color: rgb(89, 94, 108);
  color: #fff;
  position: relative;
}

.el-main {
  width: 1450px;  
  padding: 0;
  height: calc(100vh - 50px);
  background-color: rgb(249,249,249);
}
.firstPage {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.el-aside {
  height: calc(100vh - 50px);
 }
.header-right > div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  padding: 0 20px;
}
.header-right > div:nth-child(1):hover {
  cursor: pointer;
}
.header-right > div:nth-child(2) {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-left: 1px solid rgb(71, 75, 87);
  border-right: 1px solid rgb(71, 75, 87);
}
.header-right > div:nth-child(3) {
  margin-left: 20px;
  & .el-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    color: #fff;
  }
}
.showUserInfo {
  width: 425px;
  height: 250px;
  padding: 0 15px;
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  font-size: 13px;
  color: rgb(153, 153, 153);
  border: 2px solid rgb(217, 217, 217);
  border-top: 0;
  & .title {
    height: 40px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(217, 217, 217);
    padding: 0 15px;
    & .changePassword {
      color: rgb(100, 188, 156);
    }
  }
  & .content {
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 20px;
    & p {
      line-height: 45px;
      & span {
        color: #000;
      }
    }
  }
}
</style>
